import React, { useState, useEffect } from 'react';
import { mrbirdApi } from '../api/user.js';
import * as echarts from 'echarts';


export default function Home() {

    const [todayIp, setTodayIp] = useState(1)
    const [todayVisitCount, setTodayVisitCount] = useState(1)
    const [totalVisitCount, setTotalVisitCount] = useState(10)
    const userinfo = JSON.parse(localStorage.user)
    // console.log(userinfo);
    const { username, deptName, roleName, lastLoginTime, avatar } = userinfo
    const textArr = [ '今天打豆豆了吗？', '今天敲代码了嘛？', '今天背面试题了嘛？']
    let re = Math.floor(Math.random() * textArr.length)
    useEffect(() => {
        // var echart 
        var chartDom = document.getElementById('home_body_left');
        // console.log(chartDom);
        // console.log('echart',echart);
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                // text: '近七天系统访问记录',
                subtext: '近七天系统访问记录'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['您', '总数']
            },
            // toolbox: {
            //     show: true,
            //     feature: {
            //         dataView: { show: true, readOnly: false },
            //         magicType: { show: true, type: ['line', 'bar'] },
            //         restore: { show: true },
            //         saveAsImage: { show: true }
            //     }
            // },
            // calculable: true,
            xAxis: [
                {
                    type: 'category',
                    // prettier-ignore,
                    data: ['11-12', '11-13', '11-14', '11-15', '11-16', '11-17', '11-18']
                    // data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '您',
                    type: 'bar',
                    data: [

                        18, 22, 23, 32, 43, 56
                        // 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                    ],
                    // markPoint: {
                    //     data: [
                    //         { type: 'max', name: 'Max' },
                    //         { type: 'min', name: 'Min' }
                    //     ]
                    // },
                    // markLine: {
                    //     data: [{ type: 'average', name: 'Avg' }]
                    // }
                },
                {
                    name: '总数',
                    type: 'bar',
                    data: [
                        // 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                        18, 22, 23, 32, 43, 56
                    ],
                    markPoint: {
                        data: [
                            { name: 'Max', value: 182.2, xAxis: 11 - 15, yAxis: 183 },
                            // { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                            { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                        ]
                    },
                    // markLine: {
                    //     data: [{ type: 'average', name: 'Avg' }]
                    // }
                }
            ]
        };
        option && myChart.setOption(option);


        mrbirdApi().then(res => {
            setTodayIp(res.data.todayIp)
            setTodayVisitCount(res.data.todayVisitCount)
            setTotalVisitCount(res.data.totalVisitCount)
        })
    }, [])
    return (
        <div className='home_box'>
            <div className='home_main'>
                <div className="home_main_left">
                    <img style={{ width: '80px', height: '80px', borderRadius: '50%' }} src={`http://xawn.f3322.net:8002/distremote/static/avatar/${avatar}`} alt="" />
                    <div className='home_main_left_text'>
                        <div className='home_main_left_text_title'>好久不见，{username}，{textArr[re]}</div>
                        <div style={{ marginBottom: '4px' }}>{deptName} | {roleName}</div>
                        <div>上次登录时间：{lastLoginTime}</div>
                    </div>
                </div>
                <div className="home_main_right">
                    <div className='home_main_right_box'>
                        <div>今日IP</div>
                        <div style={{ color: 'blue' }}>{todayIp}</div>
                    </div>
                    <div className='home_main_right_box'>
                        <div>今日访问</div>
                        <div style={{ color: 'blue' }}>{todayVisitCount}</div>
                    </div>
                    <div className='home_main_right_box'>
                        <div>总访问量</div>
                        <div style={{ color: 'blue' }}>{totalVisitCount}</div>
                    </div>
                </div>
            </div>
            <div className="home_body">
                <div id='home_body_left' className="home_body_left"></div>
                <div className="home_body_right">
                    <div className="home_body_right_title">
                        <div>进行中的项目</div>
                        <div><a href="https://www.woniuxy.com/">所有项目</a></div>
                    </div>
                    <div className='home_body_right_title_card_box'>
                        <div className="home_body_right_title_card_box_left">
                            <div className="home_body_right_title_card_box_left_icon">F</div>
                            <div className="home_body_right_title_card_box_left_text">
                                <div className='home_body_right_title_card_box_left_text_title' style={{ fontWeight: 600 }}>RedRabbit-Shiro</div>
                                <div style={{ fontSize: '10px' }}>Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。</div>
                            </div>
                        </div>
                        <div className="home_body_right_title_card_box_right">
                            <div className="home_body_right_title_card_box_left_icon">F</div>
                            <div className="home_body_right_title_card_box_left_text">
                                <div className='home_body_right_title_card_box_left_text_title' style={{ fontWeight: 600 }}>RedRabbit-Security</div>
                                <div style={{ fontSize: '10px' }}>Spring Boot 2.0.4&Spring Security 5.0.7 权限管理系统。</div>
                            </div>
                        </div>
                    </div>
                    <div className='home_body_right_title_card_box'>
                        <div className="home_body_right_title_card_box_left">
                            <div className="home_body_right_title_card_box_left_icon">S</div>
                            <div className="home_body_right_title_card_box_left_text">
                                <div className='home_body_right_title_card_box_left_text_title' style={{ fontWeight: 600 }}>SpringAll</div>
                                <div style={{ fontSize: '10px' }}>循序渐进学习Spring Boot、Spring Cloud与Spring Security。</div>
                            </div>
                        </div>
                        <div className="home_body_right_title_card_box_right">
                            <div className="home_body_right_title_card_box_left_icon">F</div>
                            <div className="home_body_right_title_card_box_left_text">
                                <div className='home_body_right_title_card_box_left_text_title' style={{ fontWeight: 600 }}>RedRabbit-Shiro-Vue</div>
                                <div style={{ fontSize: '10px' }}>RedRabbit-Shiro前后端分离版本，前端架构采用Vue全家桶。</div>
                            </div>
                        </div>
                    </div>
                    <div className='home_body_right_title_card_box'>
                        <div className="home_body_right_title_card_box_left">
                            <div className="home_body_right_title_card_box_left_icon">F</div>
                            <div className="home_body_right_title_card_box_left_text">
                                <div className='home_body_right_title_card_box_left_text_title' style={{ fontWeight: 600 }}>RedRabbit-Actuator</div>
                                <div style={{ fontSize: '10px' }}>使用Spring Boot Admin 2.0.2构建，用于监控RedRabbit。</div>
                            </div>
                        </div>
                        <div className="home_body_right_title_card_box_right"></div>
                    </div>
                </div>
            </div>
            {/* Copyright  2022 admin */}
        </div>
    )
}
